<!doctype html>
<html lang="en" data-bs-theme="auto">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>add article</title>

  <link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/assets/icons/bootstrap-icons.css">
  <link rel="stylesheet" href="/libs/tree/select-tree.css">
 
  <link href="/css/dashboard.css" rel="stylesheet">
  <script src="/js/jquery.min.js"></script>
  <script src="/libs/tree/select-tree.js"></script>
  
<!--  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.js"> </script>
  <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script>-->
  
  <style type="text/css">
   

    .edui-editor {
      width: 830px !important;
      min-height: 300px;
      height: auto;
    }

    #edui1_iframeholder {
      min-height: 200px;
    }

    body {
      background-color: #FFFFFF;
    }
  </style>
</head>

<body>

  <div class="container-fluid">

    <h5 class="card-title mt-2">添加文章</h5>
    <hr>
    <div class="row">
      <div class="col-12">
        <form id="form" action="addarticlepost" method="post">

          <div class="row mb-3">
            <label for="topicid" class="col-sm-2 col-form-label text-sm-end">选择栏目</label>
            <div class="col-sm-10">
                   <select class="form-select" id="topicid" name="topicid"></select>
            </div>
          </div>
          <div class="row mb-3">
            <label for="title" class="col-sm-2 col-form-label text-sm-end">标题</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="title" name="title" value="">
            </div>
          </div>
           <div class="row mb-3">
            <label for="title" class="col-sm-2 col-form-label text-sm-end">url网址</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="texturl" name="texturl" value="" placeholder="必须是英文数字下划线中划线">
            </div>
          </div>
          <div class="row mb-3">
            <label for="author" class="col-sm-2 col-form-label text-sm-end">作者</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="author" name="author" value="">
            </div>
          </div>
          <div class="row mb-3">
            <label for="fromsource" class="col-sm-2 col-form-label text-sm-end">来源</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="fromsource" name="fromsource" value="">
            </div>
          </div> 
         <div class="row mb-3">
            <label for="icoimg" class="col-sm-2 col-form-label text-sm-end">文章头图</label>
            <div class="col-sm-6">
              <div class="input-group mb-3">
              <input type="text" class="form-control" id="icoimg" name="icoimg" value="" placeholder="列表使用封面图或头图使用">
              <input class="form-control" type="file" style="width:100px" id="relate-icoimg" accept=".png,.jpg,.jpeg">
              </div>
            </div>
            <div class="col-sm-4">
              <div class="progress" id="progress-bar-show" style="display:none" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                  <div class="progress-bar" id="progress-bar" style="width: 0%">0</div>
                </div>
              <div id="progress-bar-result"></div>  
            </div>
          </div> 
          <div class="row mb-3">
            <label for="keywords" class="col-sm-2 col-form-label text-sm-end">关键词</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="keywords" rows="3" name="keywords"></textarea>
            </div>
          </div>
 
          <div class="row mb-3">
            <label for="summary" class="col-sm-2 col-form-label text-sm-end">文章摘要</label>
            <div class="col-sm-10">
              <textarea class="form-control" id="summary" rows="3" name="summary"
                placeholder="250字以内"></textarea>
            </div>
          </div>
          <div class="row mb-3">
            <label for="content" class="col-sm-2 col-form-label text-sm-end">文章内容</label>
            <div class="col-sm-10">
              <textarea id="editor" style="width:830px" rows="10" name="content"></textarea>
            </div>
          </div>

          <div class="row mb-3">
            <label for="relatecontent" class="col-sm-2 col-form-label text-sm-end">相关内容</label>
            <div class="col-sm-7">
            <div class="input-group mb-3">
  <input type="text" class="form-control" id="relatecontent" name="relatecontent" placeholder="选择相关内容" aria-label="相关内容" aria-describedby="relate-addon">
  <button class="btn btn-outline-secondary" type="button" id="relate-addon" data-bs-toggle="modal" data-bs-target="#exampleModal">选择</button>
</div>


            </div>
          </div>

          <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
              <button type="submit" class="btn btn-primary">确认</button>
            </div>
          </div>

        </form>
      </div>
    </div>

  </div>


<div class="modal modal-lg fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">相关内容</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <table class="table table-hover" id="selecttable">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">标题</th>
          <th scope="col">选择</th>
        </tr>
      </thead>
      <tbody> 
      </tbody>

      </table>
      
      <ul class="pagination">
        <li class="page-item" id="select_pre">
          <a class="page-link" href="#" onclick="return select_prepage()">前一页</a>
        </li>
        <li class="page-item" id="select_next">
          <a class="page-link" href="#" onclick="return select_nextpage()">下一页</a>
        </li>
      </ul>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
         
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myfiletobigModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">提示</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         文件太大了，请传4M以下的文件！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
         
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="myfilesuccessModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="myfilesuccess" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="myfilesuccess">提示</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
         上传成功！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">确定</button>
         
      </div>
    </div>
  </div>
</div>

 
  <script src="/assets/dist/js/bootstrap.bundle.min.js"></script>
  <script src="/nicedit/nicEdit.js" type="text/javascript"></script>
  <script lang="javascript">
    //var ue = UE.getEditor('editor');
    
   bkLib.onDomLoaded(function() {
	  new nicEditor({fullPanel : true,iconsPath : '/nicedit/nicEditorIcons.gif'}).panelInstance('editor');
    });
    
    var current_page=<% echo<<obj["pageinfo"]["current"].to_int(); %>;
    var min_page=<% echo<<obj["pageinfo"]["min"].to_int(); %>;
    var max_page=<% echo<<obj["pageinfo"]["max"].to_int(); %>;
    
    var topicid=<% echo<<obj["topicid"].to_int(); %>;
    var topic_json = <% echo << obj["list"].to_json(); %> ;
    $('#topicid').append($('<option>').val("0").text("所有栏目").attr("selected", true));
    for (var i = 0; i < topic_json.length; i++) 
    {
      if(topic_json[i].id==topicid)
      {
        $('#topicid').append($('<option>').val(topic_json[i].id).text(topic_json[i].value).data("pid", topic_json[i].parentid).attr("selected","selected"));
      }
      else
      {      
        $('#topicid').append($('<option>').val(topic_json[i].id).text(topic_json[i].value).data("pid", topic_json[i].parentid));
      }
    }
    var treeselect =$("#topicid").selectTree({ expandLevel: 1,
        changeCallBack:function(data){
           topicid=data[0].value;
        }
    });

    $('#exampleModal').on('show.bs.modal', event => {
            
         $.getJSON("/admin/gettoparticle?topicid="+topicid,function(result){
            if(result.code==0)
            {   
               addselect_content(result.alist);   
            }
          });
    });
    function addselect_content(alist)
    {
        var stable=$("#selecttable tbody");
        stable.empty();
        
        var relateval = $("#relatecontent").val(); 
        const artArray = relateval.split(",");   
            
        for (let i = 0; i < alist.length; i++) {
 
          const row = document.createElement("tr");
        
          const cell = document.createElement("td");
          const cellText = document.createTextNode(alist[i].aid);
          cell.appendChild(cellText);
       
          row.appendChild(cell);
        
      
          const cella = document.createElement("td");
          const cellTexta = document.createTextNode(alist[i].title);
          cella.appendChild(cellTexta);
       
          row.appendChild(cella);
          
          
          var x = document.createElement("input");
          x.setAttribute("type", "checkbox");
          x.setAttribute("value",alist[i].aid);
          x.setAttribute("onClick","select_addart(this.value,this)");
         
          if(artArray.length>0)
          {
              for (let j = 0; j < artArray.length; j++) {
                    if(alist[i].aid==artArray[j])
                    {
                        x.setAttribute("checked", "checked");
                        break;
                    }
              }
          }
          
          const cellb = document.createElement("td");
          cellb.appendChild(x);
          row.appendChild(cellb);
          
          stable.append(row);
        }
    }
    
    function select_addart(id,obj)
    {
        var relateval = $("#relatecontent").val(); 
        const artArray = relateval.split(",");   
  
        if(obj.checked)
        {
           let n=0;
           for (let j = 0; j < artArray.length; j++) {
                if(id==artArray[j])
                {
                    n=1;
                    break;
                }

            }     
            if(n!=1)
            {
                artArray.push(id);
                
            }
            $("#relatecontent").val(artArray.join(","));
            
        }
        else
        {
            let newArray=[];
            for (let j = 0; j < artArray.length; j++) {
                    if(id==artArray[j])
                    {
                        continue;
                    }
                    newArray.push(artArray[j]);
            }  
            $("#relatecontent").val(newArray.join(","));
        }
    }
    
    
        var current_page=<% echo<<obj["pageinfo"]["current"].to_int(); %>;
    var min_page=<% echo<<obj["pageinfo"]["min"].to_int(); %>;
    var max_page=<% echo<<obj["pageinfo"]["max"].to_int(); %>;
    
    function select_prepage()
    {
           
           if(current_page<1)
           {
                $("#select_pre").addClass("disabled");
                return false;
           }
           
           if($("#select_pre").hasClass("disabled"))
           {
                $("#select_pre").removeClass("disabled");
           }
           
           var page=current_page-1;
           $.getJSON("/admin/gettoparticle?page="+page+"&topicid="+topicid,function(result){
           if(result.code==0)
           {   
               addselect_content(result.alist);   
           }
          });
         return false;
    }
    
    function select_nextpage()
    {
           
           if(current_page>=max_page)
           {
                $("#select_next").addClass("disabled");
                return false;
           }
           if($("#select_next").hasClass("disabled"))
           {
                $("#select_next").removeClass("disabled");
           }
           
           var page=current_page+1;
           $.getJSON("/admin/gettoparticle?page="+page+"&topicid="+topicid,function(result){
           if(result.code==0)
           {   
               addselect_content(result.alist);   
           }
          });
         return false;
    }
    
    $(document).ready(function(e) {
        $("#relate-icoimg").change(function(){
            var fd=new FormData();
            if($(this).get(0).files[0].size>4596640){
                $('#myfiletobigModal').modal('show');
                return false;
            }
            fd.append("upfile",$(this).get(0).files[0]);
            $("#progress-bar-show").show();
            $("#progress-bar-result").hide();
            $.ajax({
                url:"/imageapi/upload?action=uploadimage",
                type:"POST",
                processData: false,
                contentType:false,
                data: fd,
                dataType: "json",
                xhr: function() {  // custom xhr
                    myXhr = $.ajaxSettings.xhr();
                    if(myXhr.upload){ // check if upload property exists
                        myXhr.upload.addEventListener('progress',function(evt){
                            var percentComplete = Math.round(evt.loaded*100 / evt.total);
                            $( "#progress-bar").css("width",percentComplete*2);
                            $( "#progress-bar").html(percentComplete+'%');
                        }, false); // for handling the progress of the upload
                    }
                    return myXhr;
                },
                success:function(data){
                    if(data.state=="SUCCESS"){
                        $("#progress-bar-show").hide();
                        $("#progress-bar-result").show();
                        $("#icoimg").val(data.url);
						$("#progress-bar-result").html("<a href='"+data.url+"' target=_blank><img height=\"50\" width=\"50\"  src=\""+data.url+"\"/></a>");
                       $('#myfilesuccessModal').modal('show');
                    }
                     
                }
            });
        });
    });	  
  </script>
</body>

</html>